import dash_bootstrap_components as dbc
from dash import html, Input, Output, callback
from server import app

badge_html = html.Div(
    [
        html.Br(),
        html.P(html.Strong('Badge: 在dash-Bootstrap组件中使用Bootstrap徽章, '
                           '徽章可以作为按钮或链接的一部分，以提供计数器', style={'color': 'rgb(255, 153, 51)'}),),
        html.Hr(),
        dbc.Button('模拟发送消息', id='notify_btn_msg_send', n_clicks=0),
        html.Hr(),
        dbc.Button(
            [
                "未读消息",
                dbc.Badge(
                    "0", 
                    id='msg_count',
                    color="danger", 
                    pill=True,
                    text_color="white", 
                    className="position-absolute top-0 start-100 translate-middle"
                ),
            ],
            color="warning",
            class_name="position-relative",
        )
    ]
)

@callback(Output('msg_count', 'children'), [Input('notify_btn_msg_send', 'n_clicks')])
def on_button_click(n):
    if n > 10:
        return f'10+'
    else:
        return f'{n}'